<template>
  <div id="testErrorRecords">
    <Breadcrumb content="错题记录" />
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane size="40">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getErrorRecordsList" @search-click="getErrorRecordsList" @keyup="keyupEnter"></vxe-input>
              <vxe-button type="text" icon="vxe-icon-refresh" class="button-blue" content="刷新" @click="getErrorRecordsList" :loading="showLoading"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="errorRecordsTableBox">
            <vxe-table ref="errorRecordsTableRef" :loading="showLoading" class="mytable-scrollbar" border align="left" height="auto" :keep-source="true" :data="errorRecordsList" :row-config="{ isCurrent: true, isHover: true }" resizable show-overflow>
              <vxe-column type="checkbox" align="center" width="26"></vxe-column>
              <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
              <vxe-column field="testCode" title="试卷编码" width="60"></vxe-column>
              <vxe-column field="testTitle" title="试卷标题"></vxe-column>
              <vxe-column field="questionTitle" title="题目标题"> </vxe-column>
              <vxe-column field="knowledgeTitle" title="知识库标题"> </vxe-column>
              <vxe-column field="knowledgeType" title="知识类型"> </vxe-column>
              <vxe-column field="questionType" title="题目类型"> </vxe-column>
              <vxe-column field="startDate" title="开始时间"></vxe-column>
              <vxe-column field="endDate" title="结束时间"> </vxe-column>
              <vxe-column field="duration" title="考试时长"> </vxe-column>
              <vxe-column field="totalScore" title="总分"> </vxe-column>
              <vxe-column field="score" title="分数"> </vxe-column>
              <vxe-column field="userName" title="考试人"> </vxe-column>
              <vxe-column field="seq" title="顺序" width="50"> </vxe-column>
              <!-- <vxe-column field="paperType" title="考试类型">
                <template #default="{ row }">
                  {{ formatterPaperType(row.paperType) }}
                </template>
              </vxe-column> -->
              <!-- <vxe-column field="isSign" title="是否考试" width="90">
                <template #default="{ row }">
                  <el-tag size="small"> {{ formatterType(row.isSign) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column title="操作" width="100" show-overflow>
                <template #default="{ row }">
                  <vxe-button type="text" status="primary" icon="vxe-icon-file-txt" :content="row.isSign === 0 ? '开始考试' : '试卷预览'" @click="startTest(row)"></vxe-button>
                </template>
              </vxe-column> -->
            </vxe-table>
          </div>   
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, onUnmounted, computed, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';

// 定义变量区 ==========
let store = AppStore();
let { proxy }: any = getCurrentInstance();
//根据关键字搜索
let searchForm = reactive({
  searchValue: '',
  year: null
});
let showLoading = ref(false); //表格加载状态
let errorRecordsList = reactive([
  { id: 10001, testCode: 'Test1', testTitle: '高等数学2', questionTitle: '微分方程', knowledgeTitle: '知识库1', knowledgeType: 'test1',questionType:'math', startDate:'2024-04-15',endDate:'2024-04-16',duration:'80',totalScore:150,score:120,userName:'成毅',seq:1},
  { id: 10002, testCode: 'Test2', testTitle: '线性代数2', questionTitle: '行列式', knowledgeTitle: '知识库2', knowledgeType: 'test2',questionType:'math', startDate:'2024-04-15',endDate:'2024-04-16',duration:'120',totalScore:150,score:120,userName:'傅诗淇',seq:2},
  { id: 10003, testCode: 'Test3', testTitle: '数据结构', questionTitle: '二叉树', knowledgeTitle: '知识库3', knowledgeType: 'test3',questionType:'computer', startDate:'2024-12-25',endDate:'2024-12-25',duration:'120',totalScore:150,score:128,userName:'李健',seq:3},
  { id: 10004, testCode: 'Test4', testTitle: '操作系统', questionTitle: '进程管理', knowledgeTitle: '知识库4', knowledgeType: 'test4',questionType:'computer', startDate:'2024-12-26',endDate:'2024-12-26',duration:'120',totalScore:150,score:125,userName:'傅云深',seq:4},
]); //表格数据

// 方法使用区 ==========
onMounted(() => {
  getErrorRecordsList();
});

// 获取错误试题列表信息
function getErrorRecordsList() {
  // showLoading.value = true;
  // testPaperList.length = 0;
  // const url = '/wk/test/paper/getTestPaperListByUserId';
  // proxy.$http
  //   .get(url, { params: { userId: store.userInfo.id } })
  //   .then((res: any) => {
  //     if (res.data && res.data.length > 0) {
  //       testPaperList.push(...res.data);
  //       const $xTable = proxy.$refs.testPaperTableRef as any;
  //       if ($xTable) {
  //         $xTable.setCurrentRow(testPaperList[0]);
  //       }
  //     }
  //     showLoading.value = false;
  //   })
  //   .catch((err: any) => {
  //     showLoading.value = false;
  //     proxy.$alert(err, '提示');
  //   });
}

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getErrorRecordsList();
  }
}


</script>

<style lang="scss" scoped>
#testErrorRecords {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .errorRecordsTableBox {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
